

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  <title>css盒模型 - Hexo</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.0.0/styles/github-gist.min.css" />
    
  

  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_pf9vaxs7x7b.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.2.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>Zchaos</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner intro-2" id="background" parallax=true
         style="background: url('/img/post.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="container page-header text-center fade-in-up">
            <span class="h2" id="subtitle">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2020-10-07 17:43" pubdate>
        2020年10月7日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      2.8k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      31
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto" id="post">
            <!-- SEO header -->
            <h1 style="display: none">css盒模型</h1>
            
            <div class="markdown-body" id="post-body">
              <h1 id="CSS盒模型相关"><a href="#CSS盒模型相关" class="headerlink" title="CSS盒模型相关"></a>CSS盒模型相关</h1><h2 id="盒模型-Box-model"><a href="#盒模型-Box-model" class="headerlink" title="盒模型( Box model )"></a>盒模型( Box model )</h2><p><img src="https://i.loli.net/2020/10/07/xRs1kKG3AuFCzb6.png" srcset="/img/loading.gif" alt="box-model"></p>
<blockquote>
<p>完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。</p>
</blockquote>
<ul>
<li><strong>Content box</strong>: 这个区域是用来显示内容，大小可以通过设置 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/width"><code>width</code></a> 和 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/height"><code>height</code></a>.</li>
<li><strong>Padding box</strong>: 包围在内容区域外部的空白区域； 大小通过 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding"><code>padding</code></a> 相关属性设置。</li>
<li><strong>Border box</strong>: 边框盒包裹内容和内边距。大小通过 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border"><code>border</code></a> 相关属性设置。</li>
<li><strong>Margin box</strong>: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin"><code>margin</code></a> 相关属性设置。</li>
</ul>
<h3 id="标准盒模型"><a href="#标准盒模型" class="headerlink" title="标准盒模型"></a>标准盒模型</h3><p>在标准模型中，如果你给盒设置 <code>width</code> 和 <code>height</code>，实际设置的是 <em>content box</em>。</p>
<h3 id="替代（IE）盒模型"><a href="#替代（IE）盒模型" class="headerlink" title="替代（IE）盒模型"></a>替代（IE）盒模型</h3><p>在标准模型中，如果你给盒设置 <code>width</code> 和 <code>height</code>，实际设置的是 <em>border box</em>。</p>
<p><strong>备注：</strong>将<code>box-sizing</code>的默认值<code>content-box</code>设置为<code>border-box</code>更为直观，所以很多<code>reset.css</code>会把盒模型切换成ie的（这或许是ie留下来唯一美好的事物了）</p>
<pre><code class="hljs css"><span class="hljs-selector-tag">html</span> &#123;
  <span class="hljs-attribute">box-sizing</span>: border-box;
&#125;
*, *<span class="hljs-selector-pseudo">:before</span>, *<span class="hljs-selector-pseudo">:after</span> &#123;
  <span class="hljs-attribute">box-sizing</span>: inherit;
&#125;</code></pre>

<h2 id="外边距合并-Margin-Collapsing"><a href="#外边距合并-Margin-Collapsing" class="headerlink" title="外边距合并( Margin Collapsing )"></a>外边距合并( Margin Collapsing )</h2><blockquote>
<p>两个或多个毗邻（父子元素或兄弟元素）的普通流中的块元素垂直方向上的 margin 会发生叠加。这种方式形成的外边距即可称为外边距叠加(collapsed margin)。</p>
</blockquote>
<p>有以下三种情况可能会发生外边距合并：相邻的同胞元素，父子元素，空元素。</p>
<p><strong>如何避免外边距合并：</strong></p>
<ul>
<li>父子元素的外边距合并问题可以让父元素产生BFC（比如设置<code>overflow：hidden</code>）或者设置padding和border。</li>
<li>相邻兄弟元素的外边距合并问题可以设置float 或 inline-block 或 <code>position:absolute</code>。</li>
</ul>
<h2 id="包含块（Containing-Block）"><a href="#包含块（Containing-Block）" class="headerlink" title="包含块（Containing Block）"></a>包含块（Containing Block）</h2><blockquote>
<p>一个元素的盒模型的定位、尺寸常常会依据某个矩形(box)来计算，这个矩形就叫做这个元素的包含块（Containing Block）。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。</p>
</blockquote>
<ol>
<li>如果 position 属性为 <code>static</code> 、 <code>relative </code>或 <code>sticky</code>，包含块可能由它的最近的祖先<strong>块元素</strong>（比如说inline-block, block 或 list-item元素）的内容区的边缘组成，也可能会建立格式化上下文(比如说 a table container, flex container, grid container, 或者是 the block container 自身)。</li>
<li>如果 position 属性为 <code>absolute </code>，包含块就是由它的最近的 position 的值不是 <code>static</code> （也就是值为<code>fixed</code>, <code>absolute</code>, <code>relative</code> 或 <code>sticky</code>）的祖先元素的内边距区的边缘组成。</li>
<li>如果 position 属性是 <code>fixed</code>，在连续媒体的情况下(continuous media)包含块是 viewport ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。</li>
<li>如果 position 属性是 <code>absolute</code> 或 <code>fixed</code>，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：<ul>
<li><code>transform</code>和<code>perpective</code>的值不为<code>none</code></li>
<li><code>will-change</code>的值为<code>transform</code>或者<code>perpective</code></li>
<li><code>filter</code>的值不为<code>none</code>,<code>will-change</code>的值为<code>filter</code>(仅在火狐有效)</li>
<li><code>contain</code>的值为<code>paint</code></li>
</ul>
</li>
</ol>
<table>
<thead>
<tr>
<th align="center">position</th>
<th align="center">包含块</th>
</tr>
</thead>
<tbody><tr>
<td align="center">absolute</td>
<td align="center">第一个不为<code>static</code>的祖先元素/根元素（特殊情况除外）</td>
</tr>
<tr>
<td align="center">fixed</td>
<td align="center">视窗（view）或者分页区域（page area）</td>
</tr>
<tr>
<td align="center">其他</td>
<td align="center">最近的祖先块元素/建立格式化上下文（eg:ffc,gfc）</td>
</tr>
</tbody></table>
<p>*根元素(<html>)所在的包含块是一个被称为<strong>初始包含块</strong>的矩形。</p>
<p><strong>总结:</strong>    确定包含块先判断元素是否是根元素<code>&lt;html&gt;</code>,再判断包含块的<code>position</code>属性。若是<code>absolute</code>要判断第一个定位的祖先元素，还要判断祖先元素的是行内元素还是块状元素。（<code>absolute</code>的包含块判断非常复杂，除了祖先元素是块级元素的判断，行内元素的仅做了解）<br>    祖先元素为行内元素时，需要根据<code>direction</code>和祖先元素第一个和最后一个元素的padding-area来判断包含块。</p>
<h2 id="层叠上下文（The-stacking-context）"><a href="#层叠上下文（The-stacking-context）" class="headerlink" title="层叠上下文（The stacking context）"></a>层叠上下文（The stacking context）<img src="https://i.loli.net/2020/10/07/s65C7yWn8kqxYVS.png" srcset="/img/loading.gif" alt="stacking "></h2><blockquote>
<p>层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。</p>
</blockquote>
<h3 id="层叠上下文创建条件"><a href="#层叠上下文创建条件" class="headerlink" title="层叠上下文创建条件"></a>层叠上下文创建条件</h3><ul>
<li><p><code>&lt;html&gt;</code>元素</p>
</li>
<li><p><code>positon:absolute</code>/<code>position:relative</code>的<code>z-index</code>不为<code>auto</code>的元素</p>
</li>
<li><p><code>position: fixed</code>/<code>position:sticky</code>的元素</p>
</li>
<li><p>flex/grid容器的子元素，且<code>z-index</code>不为<code>auto</code>的元素</p>
</li>
<li><p>其他应用了CSS3的元素(<strong>部分</strong>)</p>
<ul>
<li><code>opacity</code>小于1的元素</li>
<li><code>transform</code>值不为<code>none</code>元素</li>
</ul>
<p>其他的请参考：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">层叠上下文</a></p>
</li>
</ul>
<h3 id="层叠上下文特性"><a href="#层叠上下文特性" class="headerlink" title="层叠上下文特性"></a>层叠上下文特性</h3><ul>
<li>层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。</li>
<li>每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。</li>
<li>每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。</li>
</ul>
<h3 id="层叠上下文比较"><a href="#层叠上下文比较" class="headerlink" title="层叠上下文比较"></a>层叠上下文比较</h3><ul>
<li>在同一个层叠上下文中，则根据7阶层叠水平比较。</li>
<li>在不同的层叠上下文中，则直接比较父元素的层叠水平。</li>
<li>若父元素的z-index不同，则z-index数值越大，越在上面。</li>
<li>若父元素的z-index相同，则在DOM流中处于后面的元素会覆盖前面的元素。</li>
</ul>
<h2 id="块格式化上下文（Block-Formatting-Context）"><a href="#块格式化上下文（Block-Formatting-Context）" class="headerlink" title="块格式化上下文（Block Formatting Context）"></a>块格式化上下文（Block Formatting Context）</h2><blockquote>
<p>BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。</p>
</blockquote>
<h3 id="BFC创建条件"><a href="#BFC创建条件" class="headerlink" title="BFC创建条件"></a>BFC创建条件</h3><ul>
<li>根元素（<code>&lt;html&gt;）</code></li>
<li>浮动元素（元素的 <code>float</code> 不是 <code>none</code>）</li>
<li>绝对定位元素（元素的 <code>position</code>为 <code>absolute</code> 或 <code>fixed</code>）</li>
<li>行内块元素（元素的 <code>display</code> 为 <code>inline-block</code>）</li>
<li><code>overflow</code>值不为 <code>visible</code> 的块元素</li>
<li>弹性元素或网格元素</li>
</ul>
<p>其他请参考：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context">块格式化上下文</a></p>
<h3 id="BFC规则"><a href="#BFC规则" class="headerlink" title="BFC规则"></a>BFC规则</h3><ul>
<li>内部的 Box 以垂直方向，一个接一个地放置。</li>
<li>Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。</li>
<li>每个元素的 margin box 的左边， 与容器块的 border box 的左边相接触(对于从左往右的文字格式 (西方语言) ，否则相反)。即使存在浮动也是如此。</li>
<li>BFC的区域不会与 float box 重叠。</li>
<li>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。</li>
<li>计算BFC的高度时，浮动元素也参与计算。</li>
</ul>
<p><strong>备注：</strong> margin合并和清除浮动是BFC最典型的应用，还有用于布局的</p>
<h2 id="行内格式化上下文（Inline-Formatting-Contexts）"><a href="#行内格式化上下文（Inline-Formatting-Contexts）" class="headerlink" title="行内格式化上下文（Inline Formatting Contexts）"></a>行内格式化上下文（Inline Formatting Contexts）</h2><blockquote>
<p>行内级格式化上下文（Inline Formatting Contexts）用来规定<code>Inline-level box</code>的格式化规则。IFC 只有在一个块级元素中仅包含内联级别元素时才会生成。</p>
</blockquote>
<h3 id="IFC规则"><a href="#IFC规则" class="headerlink" title="IFC规则"></a>IFC规则</h3><ul>
<li><p>内部的盒子会在水平方向，一个接一个地放置。</p>
</li>
<li><p>这些盒子垂直方向的起点从包含块盒子的顶部开始。</p>
</li>
<li><p>摆放这些盒子的时候，它们在水平方向上的 padding、border、margin 所占用的空间都会被考虑在内。</p>
</li>
<li><p>在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。</p>
</li>
<li><p>能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。</p>
</li>
<li><p>IFC中的 line box 一般左右边都贴紧其包含块，但是会因为float元素的存在发生变化。float 元素会位于IFC与与 line box 之间，使得 line box 宽度缩短。</p>
</li>
<li><p>IFC 中的 line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同（比如一行包含了较高的图片，而另一行只有文本）</p>
</li>
<li><p>当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性来确定，如果取值为 justify，那么浏览器会对 inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。</p>
</li>
<li><p>当一个 inline box 超过 line box 的宽度时，它会被分割成多个boxes，这些 boxes 被分布在多个 line box 里。如果一个 inline box 不能被分割（比如只包含单个字符，或 word-breaking 机制被禁用，或该行内框受 white-space 属性值为 nowrap 或 pre 的影响），那么这个 inline box 将溢出这个 line box。</p>
<p><strong>辅助资料：</strong></p>
<ol>
<li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html">深入理解line-height</a></li>
<li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/dolphinX/p/3236686.html">css行高</a></li>
</ol>
</li>
</ul>
<h2 id="常规流-Normal-flow"><a href="#常规流-Normal-flow" class="headerlink" title="常规流(Normal flow)"></a>常规流(Normal flow)</h2><blockquote>
<p>在未添加css属性的情况下，浏览器的默认布局方式</p>
</blockquote>
<ul>
<li>在常规流中，依次按照盒子一个接着一个水平左右排列，没位置换行。</li>
<li>在<strong>块级格式上下文(BFC)**中，盒子依次</strong>垂直方向**排列。</li>
<li>在<strong>行内格式上下文(IFC)**中，盒子则</strong>水平方向**排列。</li>
<li>当 <code>position</code> 为 <code>static</code> 或 <code>relative</code>，并且 <code>float</code> 为 <code>none</code> 时会触发常规流。</li>
<li>对于<strong>静态定位(static positioning)</strong>, <code>position: static</code>, 此时盒子的位置会根据普通流所计算出来的确切位置来定位。</li>
<li>对于<strong>相对定位(relative positioning)</strong>, <code>position: relative</code>, 此时盒子会根据偏移属性<code>top</code>,<code>bottom</code>,<code>left</code>和<code>right</code>，进行偏移。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。</li>
</ul>
<h2 id="视觉格式化模型-visual-formatting-model"><a href="#视觉格式化模型-visual-formatting-model" class="headerlink" title="视觉格式化模型(visual formatting model)"></a>视觉格式化模型(visual formatting model)</h2><blockquote>
<p>CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。</p>
</blockquote>
<p>视觉格式化模型根据 CSS 盒模型为文档的每个元素生成 0，1 或多个盒。每个盒的布局由如下内容组成：</p>
<ol>
<li>盒尺寸：明确指定，受限或没有指定</li>
<li>盒类型：行内(inline), 行内级别(inline-level), 原子行内级别(atomic inline-level), 块(block)盒；</li>
<li>定位方案(positioning scheme): 常规流，浮动或绝对定位；</li>
<li>树中的其它元素: 它的子代与同代；</li>
<li>视口(viewport) 尺寸与位置；</li>
<li>内含图片的固定尺寸；</li>
<li>其它信息。</li>
</ol>
<p>一个盒相对于它的包含块(containing block) 的边界来渲染。通常盒为它的后代元素建立包含块。注意盒并不受它的包含块的限制，当它的布局跑到包含块的外面时称为溢出(overflow)。</p>
<h2 id="可替换元素（replaced-element）"><a href="#可替换元素（replaced-element）" class="headerlink" title="可替换元素（replaced element）"></a><strong>可替换元素</strong>（<strong>replaced element</strong>）</h2><blockquote>
<p><strong>可替换元素</strong>（<strong>replaced element</strong>）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。</p>
</blockquote>
<p><strong>典型的可替换元素：</strong> <code>&lt;iframe&gt;</code> <code>&lt;video&gt;</code> <code>&lt;embed&gt;</code> <code>&lt;img&gt;</code> </p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/css/">css</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/%E7%9B%92%E6%A8%A1%E5%9E%8B/">盒模型</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext row">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2020/10/07/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E4%BB%A5%E5%8F%8A%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">浏览器渲染以及性能优化</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2020/10/05/git/">
                        <span class="hidden-mobile">Git</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a id="scroll-top-button" href="#" role="button">
      <i class="iconfont icon-arrowup" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener">
        <span>Fluid</span></a>
    </div>
    

    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/main.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/lazyload.js" ></script>
  



  



  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/js/clipboard-use.js" ></script>







  <script  src="https://cdn.staticfile.org/tocbot/4.11.1/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;

      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: '#post-body',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        collapseDepth: 0,
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc').css('visibility', 'visible');
      }
    });
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "css盒模型&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    var path = "/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      searchFunc(path, 'local-search-input', 'local-search-result');
      this.onclick = null
    }
  </script>



  <script  src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />

  <script>
    $('#post img:not(.no-zoom img, img[no-zoom]), img[zoom]').each(
      function () {
        var element = document.createElement('a');
        $(element).attr('data-fancybox', 'images');
        $(element).attr('href', $(this).attr('src'));
        $(this).wrap(element);
      }
    );
  </script>




















</body>
</html>
